revision:
It sets or returns if the content of an element is editable.
Syntax:
element.contentEditable : returns the contentEditable property.
element.contentEditable = value : sets the contentEditable property.
property value:
value : "true" - the content is editable; "false" - the content is not editable; inherit"- default. Is editable if parent element is editable
example
Am I editable?
I am a paragraph. Click "editable" to make me editable.
<div> <p id="par1" contenteditable="true">Am I editable?</p> <p id="prop1"></p> <p id="par2" style="font-size: 0.9vw;">I am a paragraph. Click "editable" to make me editable.</p> <button onclick="firstFunction()">editable</button> <p id="prop2"></p> </div> <script> let answer = document.getElementById("par1").contentEditable; document.getElementById("prop1").innerHTML = answer; function firstFunction() { document.getElementById("par2").contentEditable = true; document.getElementById("prop16").innerHTML = "The paragraph is now editable. Try to edit it."; } </script>
Try to change this text.
<div> <p id="par3" contenteditable="true">Try to change this text.</p> <button onclick="secondFunction(this);">Disable "par2" to be editable!</button> <p id="prop3"></p> </div> <style> </style> <script> function secondFunction(button) { const x = document.getElementById("par3"); if (x.contentEditable == "true") { x.contentEditable = "false"; button.innerHTML = 'Enable "par3" p to be editable!'; } else { x.contentEditable = "true"; button.innerHTML = 'Disable "par3" to be editable!'; } } </script>